<template>
  <ul class="list">
    <li v-for="item in list" :key="item.id">
      <router-link :to="{ path: 'detail/' + item.id }">
        <img :src="'https://images.weserv.nl?url=' + item.images.large" />
        <div class="info">
          <h3>{{ item.title }}</h3>
          <p>豆瓣评分：{{ item.rating.average }}</p>
          <p>
            <span
              v-for="(tag, index) in item.genres"
              :key="index"
              class="tag"
              >{{ tag }}</span
            >
          </p>
        </div>
      </router-link>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  }
};
</script>

<style lang="scss" scoped></style>
